<template>
    <div class="header">
        <div class="header-left"><div class="iconfont icon-back">&#xe658;</div></div>
        <div class="header-input"><span class="iconfont">&#xe63c;</span>输入城市景点游玩主题</div>
        <div class="header-right">城市<span class="iconfont">&#xe65c;</span></div>
    </div>
</template>

<script>
export default {
    name:'HeaderHome'
}
</script>

<style lang="stylus" scoped>
// 引入样式变量文件 @import 注意要在路径前面加 ~
@import "~styles/varibles.styl";
.header{
    display: flex;
    height: .86rem;
    line-height: .86rem;
    background-color $bgColor
    color #fff

    .header-left{
        width: .64rem;
        float: left
        .icon-back {
            text-align center
            font-size .6rem
        }
            
    }
    .header-input {
        flex: 1
        height .64rem
        line-height .64rem
        margin-top .12rem
        margin-left .2rem
        padding-left .2rem
        background-color #fff
        border-radius .1rem
        color #ccc
    }
    .header-right {
        width: 1.24rem
        float: right
        text-align center
    }

}
    
</style>

